import React, { Component } from 'react';


class App extends Component{
  state={
    msg:"data最原始的msg"
  }
static getDerivedStateFromProps(props,state){
  console.log('组件更新出发了getDerivedStateFromProps')
  return null;
}

shouldComponentUpdate(nextProps,nextState){
  // false => 组件不会更新
  // true => 组件更新
  console.log("组件更新触发了shouldComponentUpdate")
  return true;
  //return false;
}

handleClick=()=>{
  this.setState({
    msg:'点击改变了msg'
  })
}
render(){
  console.log('组件更新触发了render')
  return (
    <div>
    <h1>{this.state.msg}</h1>
    <button onClick={this.handleClick}>改变视图执行了什么</button>
  </div>
  )
}

getSnapshotBeforeUpdate(preProps,PreState){
  console.log('组件更新执行了getSnapshotBerforeUpdate')
  return null
}
componentDidUpdate(preProps,preState,snapshot){
  console.log("组件执行了componentDidUpdate")
}
  
 
}

export default App;
// [HMR] Waiting for update signal from WDS...
// App.js:27 1父组件的constructor
// App.js:32 2父组件的getDrivedStateFromProps
// App.js:36 3父组件的render
// App.js:7 1子组件中的constructor
// App.js:10 2子组件中的getDerivedStateFromProps
// App.js:14 3子组件中的render
// App.js:18 4子组件中的componentDidMount
// App.js:50 4父组件的componentDidMoun
